<template>
  <div class="box">
    <!-- <lazy-component> -->
    <div class="search_button">
      <!-- 歌曲图片 -->
      <van-image
        :class="{ musicImgRotate: ifPlaying, pause: ifPaused }"
        round
        width="150px"
        height="150px"
        :src="songimg"
      />
      <!-- 播放按钮 -->
      <div class="player_btn" @click="player(flag)">
        <audio ref="audio" :src="songurl"></audio>
        <img :src="playimg" />
      </div>
    </div>
    <!-- </lazy-component> -->
    <div class="info_top">
      <!--歌曲名-->
      <div class="info_song">{{ songname }}</div>
      <!--歌曲作者-->
      <div class="info_song_auther">{{ singer }}</div>
      <!--水波-->
      <div class="watertiv">
        <div class="water_1"></div>
        <div class="water_2"></div>
      </div>
    </div>
    <div class="info">
      <!--评论-->
      <div class="info_tag">
        <p>{{ cont }}</p>
      </div>
      <div class="info_u">
        <p>{{ user }}</p>
      </div>
    </div>
    <div class="info" style="border-radius: 20px; margin-top: 10px; text-align: center; background-color: #fee">
      <a @click="next" style="font-size: 13px; cursor: pointer">切换下一条</a>
    </div>
  </div>
</template>

<script>
import { getsongAPI, getsongdeAPI, gethotcommentAPI, getsongurlAPI } from '@/request/api.js'
export default {
  name: 'comment',
  data() {
    return {
      id: 376493212,
      limit: 20,
      offset: 0,
      songarr: [],
      Index: '',
      songid: '',
      songname: '',
      songimg: '',
      songinfo: {},
      singer: '',
      cont: '',
      user: '',
      songurl: '',
      playimg: require('@/assets/play.png'),
      flag: false
    }
  },
  props: {
    msg: {
      type: String,
      default: 'Hello'
    }
  },
  created() {
    this.getsongarr()
  },
  methods: {
    // 获取歌单里的歌曲信息
    async getsongarr() {
      const { data: res } = await getsongAPI(this.id, this.limit, this.offset)
      this.songarr = res.songs
      // 随机在数组长度中取一个值
      this.Index = Math.floor(Math.random() * this.songarr.length - 1)
      // 获取歌曲的id
      this.songid = this.songarr[this.Index].id
      // 获取歌曲的名字
      this.songname = this.songarr[this.Index].al.name
      // 获取歌曲的img
      this.songimg = this.songarr[this.Index].al.picUrl + '?param=150y150'
      this.getsonginfo(this.songid)
      this.getsongmsg(this.songid, 0, 5)
      this.getsongurl(this.songid)
    },
    // 获取歌曲的歌手
    async getsonginfo(id) {
      const { data: res } = await getsongdeAPI(id)
      this.songinfo = res.songs[0].ar
      // 如果有两个歌手的时候遍历出所有歌手
      if (this.songinfo.length >= 2) {
        for (var i = 0; i < this.songinfo.length; i++) {
          this.singer += this.songinfo[i].name + '/'
        }
      } else {
        // 只有一个歌手的时候直接输出
        this.singer = this.songinfo[0].name
      }
    },
    //获取评论
    async getsongmsg(id, type, limit) {
      const { data: res } = await gethotcommentAPI(id, type, limit)
      var rand = Math.floor(Math.random() * res.hotComments.length)
      // 取前5条中的随机评论
      this.cont = res.hotComments[rand].content
      // 获取评论的name
      this.user = '---来自用户：' + res.hotComments[rand].user.nickname
      // console.log(this.user)
    },
    // 获取歌曲url
    async getsongurl(id) {
      const { data: res } = await getsongurlAPI(id)
      this.songurl = res.data[0].url
      // console.log(this.songurl)
    },
    //播放音乐
    player(flag) {
      // flag初始值是false,所以点击播放的时候执行的是else里的语句
      // 播放之后flag的值是true，所以再次点击的时候是执行if里面的语句
      if (flag) {
        this.$refs.audio.pause()
        this.flag = false
        this.playimg = require('@/assets/play.png')
        //停止图片旋转
        this.ifPaused = true
        this.ifPlaying = false
      } else {
        this.$refs.audio.play()
        this.flag = true
        this.playimg = require('@/assets/pause.png')
        //图片旋转
        this.ifPlaying = true
        this.ifPaused = false
      }
    },
    next() {
      this.getsongarr()
    }
  }
}
</script>

<style scoped>
.search_button {
  vertical-align: middle;
  height: 150px;
  width: 150px;
  text-align: center;
  margin: 0 auto;
  border-radius: 50%;
  margin-bottom: -70px;
}
.player_btn {
  margin-top: -110px;
  cursor: pointer;
}

.player_btn img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  padding: 6px;
  box-shadow: 0 1px 10px 0 rgba(44, 42, 54, 0.3);
  opacity: 0.8;
}
.info {
  color: #666;
  font-size: 18px;
  border-radius: 20px;
  line-height: 23px;
  padding: 10px;
  background: #fff;
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
}
.info_top {
  text-align: center;
  padding-top: 100px;
  padding-bottom: 30px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background-color: #ffc7c7;
  color: #fff;
  font-size: 13px;
  line-height: 25px;
}
.info_tag,
.info_u {
  /* margin-top: 10px; */
  max-height: 150px;
  padding-top: 5px;
  overflow: auto;
  overflow-x: hidden;
  /* margin-bottom: 30px; */
}

.info_tag p {
  word-wrap: break-word;
  word-break: break-all;
  text-align: left;
  font-size: 12px;
}

.info_u p {
  word-wrap: break-word;
  word-break: break-all;
  text-align: right;
  font-size: 14px;
}

.info_song_auther {
  margin-bottom: 20px;
}
.watertiv {
  position: relative;
  border-bottom: 0.1px solid rgba(255, 255, 255, 0);
  margin-top: -15px;
  width: 100%;
}
.water_1,
.water_2 {
  position: absolute;
  width: 100%;
  height: 30px;
}

.water_1 {
  top: -8px;
  background: url(https://img.789dl.cn/2022/03/a64543e981931.svg) repeat-x;
  background-size: 600px;
  animation: wave-animation-z 3.5s infinite linear;
}

.water_2 {
  top: 1px;
  background: url(https://img.789dl.cn/2022/03/2c192e26c6c9a.svg) repeat-x;
  background-size: 600px;
  animation: wave-animation-y 6s infinite linear;
}
.musicImgRotate {
  animation: rotate 6s linear infinite;
}
@keyframes rotate {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
</style>
